<!-- 房间设置 -->
<template>
	<view class="set-container">
		<u-steps current="2">
			<u-steps-item title="基本信息"></u-steps-item>
			<u-steps-item title="楼层模板"></u-steps-item>
			<u-steps-item title="房间设置"></u-steps-item>
		</u-steps>
		<view class="home-container">
			<u-gap height="6" bgColor="#F7F7F7"></u-gap>
			<view class="title">
				<text>楼层</text>
				<!-- <text>{{item.unit}}</text> -->
			</view>
			<u-checkbox-group @change="checkboxChange">
				<view class="box">
					<u-gap height="6" bgColor="#F7F7F7"></u-gap>
					<!-- <view class="title">
								<text>楼层</text>
								<text v-for="(v, i) in infoList" :key="i">{{v.unit}}</text>
							</view> -->
					<u-gap height="6" bgColor="#F7F7F7"></u-gap>
					<view class="item" v-for="(item, index) in infoList" :key="index">
						<view class="step">{{index + 1}}</view>
						<view class="con">
							<view :class="[val.clearState == 0 ? 'clearActive' : 'house']"
								v-for="(val, i) in item.floorHouseEntityList" :key="i">
								<!-- <u-checkbox v-if="checkboxShow" :checked="checkedAll" shape="circle"
									:name="val.houseName">
								</u-checkbox> -->
								<view class="seContainer">
									<image src="../../static/images/radio.png" mode=""></image>
								</view>
								<text>{{val.houseName}}</text>
								<text>{{val.houseType}}</text>
								<text>{{val.houseArea}}m²</text>
							</view>
						</view>
					</view>
				</view>
			</u-checkbox-group>
			<view class="btns" v-if="optionBtnShow">
				<button @click="batchEdit">批量编辑</button>
				<button>完成</button>
			</view>
			<view class="editBtns" v-else>
				<view class="cancelEdit">
					<text @click="clear()">合并清除</text>
					<text @click="merge()">合并房间</text>
					<button @click="next()">确定</button>
				</view>
			</view>
			<u-popup :show="showPopup" :closeable="true" @close="close" @open="open">
				<view class="popupTitle">
					编辑房间
				</view>
				<view class="popupCon">
					<view class="ischecked">
						<text>已选房间：</text>
						<text>{{isCheckedList}}</text>
					</view>
					<u--form :model="form">
						<view class="item">
							<text>户型：</text>
							<u--input trim v-model="form.price" border="none" placeholder="请填写"></u--input>
							<text>元/m²</text>
						</view>
						<view class="item">
							<text>面积：</text>
							<u--input trim v-model="form.totalPrice" border="none" placeholder="请填写"></u--input>
							<text>m²</text>
						</view>
					</u--form>
					<button class="submit" @click="submit()">确定</button>
				</view>
			</u-popup>
			<!-- 提交提示弹框 -->
			<u-modal :show="showSumit" title="提交" :content="loginContent" :mask-close-able="true" @confirm="confirm"
				@cancel="cancel" @close="close" showCancelButton confirm-text="提交">
			</u-modal>
		</view>
	</view>
</template>

<script>
	import {
		floorControllerAdd
	} from '@/unit/api.js';
	export default {
		data() {
			return {
				active: false, // radio选中状态
				currentDataBuild: 0,
				currentDataCell: 0,
				checkboxValue: [],
				checkboxShow: false, // 自定义checkbox
				optionBtnShow: true, // 操作按钮显示
				checkLength: 0, // 已选多少个
				checkedAll: false,
				checkedSingle: false,
				showPopup: false, // 弹出层
				currentDataColor: "", // 状态选择
				isCheckedList: [], // 已选择房间数
				isIdList: [], // 已选择房间数(用于提交)
				showSumit: false, // 提交登录框
				loginContent: '请检查您的操作无误，请提交！',
				form: {
					"deposit": '', // 定金
					"price": '', // 单价
					"totalPrice": '' // 总价
				},
				infoList: [],
			}
		},
		onLoad() {
			this.infoList = uni.getStorageSync("houseList");
			// console.log("infoList", this.infoList)
		},
		methods: {
			// 批量编辑
			batchEdit() {
				this.checkboxShow = true;
				this.optionBtnShow = false;
			},
			// 取消编辑
			cancelEdit() {
				this.checkboxShow = false;
				this.optionBtnShow = true;
				this.checkedAll = false;
			},
			checkboxChange(n) {
				this.checkLength = n.length;
				this.isCheckedList = n.join(",")
				this.isIdList = n;
				console.log("n", n)
			},
			// 下一步
			next() {
				if (this.checkLength < 1) {
					uni.showToast({
						title: '至少选择一项',
						icon: "none",
						duration: 2000
					});
					return false;
				} else {
					this.showPopup = true;
				}
			},
			changeColorTab(e) {
				this.currentDataColor = e;
			},
			close() {
				this.showPopup = false;
			},
			// 提交
			submit() {
				this.showSumit = true;
				this.confirm();
				console.log("for", this.form)
			},
			// 提交
			confirm() {

			},
			cancel() {
				this.showSumit = false;
			},
			// 合并清除
			clear() {
				if (this.checkLength < 1) {
					uni.showToast({
						title: '至少选择一项',
						icon: "none",
						duration: 2000
					});
					return false;
				}
				console.log("id", this.isIdList)
				let newArr = [];
				newArr = this.isIdList.map(item => {
					this.infoList.map(val => {
						val.floorHouseEntityList.filter(v => {
							if (v.houseName == item) {
								val.floorHouseEntityList.push({
									clearState: 0
								})
							}
						})
					})

				})
				console.log("new", newArr)
			},
			// 合并房间
			merge() {}
		}
	}
</script>

<style lang="scss">
	/deep/.u-gap {
		margin-top: 40rpx !important;
		margin-bottom: 10rpx !important;
	}

	.clearState {
		background: #F0F0F0;
	}

	.clearActive {
		background: #F0F0F0;
		border: 1px solid #DDDDDD;
		width: 180rpx;
		height: 160rpx;
		font-size: 24rpx;
		color: #666666;
		margin-left: 20rpx;
		text-align: center;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		position: relative;
		flex-shrink: 0;

		text {
			display: block;
			width: 100%;

			&:first-child {
				font-size: 28rpx;
				color: #000;
			}
		}
	}

	.btns {
		margin: auto;
		margin-top: 50rpx;
		display: flex;
		margin-bottom: 50rpx;
		width: 90%;
		justify-content: space-between;
		display: flex;

		button {
			font-size: 32rpx;

			&:first-child {
				width: 45%;
				height: 80rpx;
				line-height: 80rpx;
				background: none;
				color: #1A9CEE;
				border: 1px solid #1A9CEE;
			}

			&:last-child {
				width: 45%;
				height: 82rpx;
				line-height: 82rpx;
				background: #1A9CEE;
				color: #fff;
			}
		}
	}

	.editBtns {
		margin: auto;
		margin-top: 50rpx;
		display: flex;
		margin-bottom: 50rpx;
		width: 90%;
		align-items: center;
		justify-content: space-between;

		.line {
			vertical-align: middle;
			color: #E4E4E4;
			margin-left: 10rpx;
			margin-right: 10rpx;
		}

		.btnsInfo {
			width: 40%;
			display: flex;
			font-size: 32rpx;
		}

		.cancelEdit {
			display: flex;
			justify-content: space-between;

			text {
				color: #1A9CEE;
				height: 80rpx;
				line-height: 80rpx;
				display: inline-block;
				font-size: 32rpx;
				width: 200rpx;
				text-align: center;
			}

			button {
				background: #1A9CEE;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 32rpx;
				color: #fff;
				width: 200rpx;
				margin-left: 40rpx;
			}
		}
	}

	.home-container {

		.building,
		.cell {
			width: 95%;
			margin: auto;
			margin-top: 20rpx;
			display: flex;
			flex-wrap: nowrap;

			.active {
				background: #EFFAFF;
				color: #333;
				font-size: 28rpx;
				width: 140rpx;
				float: left;
				margin-bottom: 20rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				margin-left: 10rpx;
				border: 1px solid #A0E8FF;
			}

			.label {
				width: 100rpx;
				font-size: 28rpx;
				text-align: center;
			}

			.list {
				width: calc(100% - 100rpx);
				display: flex;
				flex-wrap: wrap;

				.value {
					background: #F7F7F7;
					color: #333;
					font-size: 28rpx;
					width: 140rpx;
					float: left;
					margin-bottom: 20rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					margin-left: 10rpx;
					border: 1px solid #F7F7F7;
				}
			}
		}

		.stateList {
			margin: auto;
			margin-top: 25rpx;
			display: flex;
			margin-bottom: 25rpx;
			justify-content: space-around;
			width: 95%;

			.item {
				text {
					&:first-child {
						height: 24rpx;
						width: 24rpx;
						display: inline-block;
						vertical-align: middle;
						margin-right: 5rpx;
					}

					&:last-child {
						font-size: 28rpx;
					}
				}

				&:first-child {
					text {
						&:first-child {
							border: 1px solid #B3B3B3;
						}
					}
				}

				&:nth-child(2) {
					text {
						&:first-child {
							border: 1px solid #3200FF;
							background: #3200FF;
						}
					}
				}

				&:nth-child(3) {
					text {
						&:first-child {
							border: 1px solid #A200FF;
							background: #A200FF;
						}
					}
				}

				&:nth-child(4) {
					text {
						&:first-child {
							border: 1px solid #00B31E;
							background: #00B31E;
						}
					}
				}

				&:nth-child(5) {
					text {
						&:first-child {
							border: 1px solid #FF0000;
							background: #FF0000;
						}
					}
				}

				&:nth-child(6) {
					text {
						&:first-child {
							border: 1px solid #5C5C5C;
							background: #5C5C5C;
						}
					}
				}
			}
		}

		.title {
			width: 90%;
			margin: auto;
			display: flex;
			margin-top: 40rpx;
			display: flex;

			text {
				height: 50rpx;
				line-height: 50rpx;
				display: inline-block;
				font-size: 28rpx;
				color: #333;
				background: #EFFAFF;
				text-align: center;
				flex-shrink: 0;
				width: 90%;

				&:first-child {
					width: 80rpx;
					background: none;
				}
			}
		}

		.box {
			width: 90%;
			margin: auto;
			margin-top: 40rpx;
			overflow: scroll;

			.item {
				height: 180rpx;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;

				.clear {
					background: #F0F0F0;
				}

				&:first-child {
					.step {
						border-radius: 50rpx 50rpx 0 0;
					}
				}

				&:last-child {
					.step {
						border-radius: 0rpx 0rpx 50rpx 50rpx;
					}
				}

				.step {
					background: rgba(0, 0, 0, 0.2);
					width: 30rpx;
					height: 180rpx;
					font-size: 28rpx;
					text-align: center;
					line-height: 180rpx;
					color: #fff;
				}

				.con {
					display: flex;
					position: relative;
					width: calc(100% - 30rpx);
					
					/deep/.u-checkbox {
						position: absolute;
						left: 0;
						right: 0;
						margin-left: auto;
						margin-right: auto;
						text-align: center;
						display: flex;
						justify-content: center;
						height: 100%;
						width: 100%;
						background: rgba(0, 0, 0, 0.2);
					}

					/deep/.u-checkbox__icon-wrap {
						margin-left: 0;
						margin-right: 0;
						text-align: center;
						margin: auto;
						position: absolute;
						display: flex;
						justify-content: center;
					}
					
					.seContainer{
						display: flex;
						justify-content: center;
						align-items: center;
						position: absolute;
						width: 100%;
						height: 100%;
						z-index: 100;
						background: rgba(0,0,0,.3);
						image{
							width: 40rpx;
							height: 40rpx;
						}
					}

					.split {
						display: flex;
						height: 100%;

						view {
							border-left: 1px solid #DDDDDD;
							height: 100%;
							font-size: 12rpx;

							&:first-child {
								border: none;
							}
						}
					}

					.merge {
						width: 780rpx !important;
						border: 1px solid #DDDDDD;
						height: 160rpx;
						font-size: 24rpx;
						color: #666666;
						margin-left: 20rpx;
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						flex-shrink: 0;
						flex-wrap: wrap;

						text {
							display: block;
							width: 100%;

							&:first-child {
								font-size: 28rpx;
								color: #000;
							}
						}
					}

					.house {
						border: 1px solid #DDDDDD;
						width: 180rpx;
						height: 160rpx;
						font-size: 24rpx;
						color: #666666;
						margin-left: 20rpx;
						text-align: center;
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						flex-shrink: 0;
						flex-wrap: wrap;


						text {
							display: block;
							width: 100%;

							&:first-child {
								font-size: 28rpx;
								color: #000;
							}
						}
					}
				}
			}

		}




		.popupTitle {
			text-align: center;
			font-size: 32rpx;
			color: #333333;
			height: 100rpx;
			line-height: 100rpx;
			border-bottom: 1px solid #E4E4E4;
			width: 100%;
		}

		.popupCon {
			width: 95%;
			margin: auto;

			.ischecked {
				margin: auto;
				border-bottom: 1px solid #F9F9F9;
				font-size: 32rpx;
				width: 95%;
				margin-top: 40rpx;
				padding-bottom: 40rpx;
			}

			.states {
				margin: auto;
				border-bottom: 1px solid #F9F9F9;
				font-size: 32rpx;
				width: 95%;
				margin-top: 40rpx;
				padding-bottom: 40rpx;

				.active0 {
					background: #fff;
					border: 1px solid #D9D9D9 !important;
					color: #000;
				}

				.active1 {
					background: #3200FF;
					border: 1px solid #3200FF !important;
					color: #fff;
				}

				.active2 {
					background: #A200FF;
					border: 1px solid #A200FF !important;
					color: #fff;
				}

				.active3 {
					background: #00B31E;
					border: 1px solid #00B31E !important;
					color: #fff;
				}

				.active4 {
					background: #FF0000;
					border: 1px solid #FF0000 !important;
					color: #fff;
				}

				.active5 {
					background: #5C5C5C;
					border: 1px solid #5C5C5C !important;
					color: #fff;
				}

				.value {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;

					text {
						width: 200rpx;
						margin-left: 10rpx;
						margin-right: 10rpx;
						display: inline-block;
						height: 70rpx;
						line-height: 70rpx;
						text-align: center;
						font-size: 32rpx;
						border: 1px solid #D9D9D9;
						margin-top: 20rpx;
					}
				}
			}

			.item {
				margin: auto;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: space-between;
				width: 95%;
				border-bottom: 1px solid #F9F9F9;
				align-items: center;
				font-size: 32rpx;

				/deep/.u-input__content__field-wrapper__field {
					text-align: right !important;
					margin-right: 20rpx;
					font-size: 32rpx !important;
				}
			}

			.submit {
				background-image: linear-gradient(to right, #21A9FF, #199AEC) !important;
				height: 90rpx;
				color: #fff;
				font-size: 32rpx;
				margin-bottom: 50rpx;
				margin-top: 40rpx;
				line-height: 90rpx;
			}
		}
	}
</style>
